<template>
    <span class="badge" v-if="text" :class="setClass" @click="onClick()">
        <svg style="position: absolute;width: 0px;height: 0px;overflow: hidden;">
            <symbol id="icon-more" viewBox="0 0 1024 1024">
                <path d="M265.39193675 499.41111617c0 53.86957139-43.64939607 97.55018621-97.56384404 97.55018621-53.85591353 0-97.53457588-43.68061484-97.53457589-97.55018621 0-53.90079013 43.67866427-97.56579462 97.53457589-97.56579464C221.74254069 401.84532153 265.39193675 445.51032794 265.39193675 499.41111617z"></path>
                <path d="M609.54920998 499.41111617c0 53.86957139-43.65134666 97.55018621-97.53652839 97.55018621-53.88322922 0-97.56384406-43.68061484-97.56384403-97.55018621 0-53.90079013 43.68061484-97.56579462 97.56384403-97.56579464C565.89786333 401.84532153 609.54920998 445.51032794 609.54920998 499.41111617z"></path>
                <path d="M953.70453261 499.41111617c0 53.86957139-43.67866427 97.55018621-97.56579462 97.55018621-53.85396107 0-97.53457588-43.68061484-97.53457591-97.55018621 0-53.90079013 43.6825654-97.56579462 97.53457591-97.56579464C910.02586835 401.84532153 953.70453261 445.51032794 953.70453261 499.41111617z"></path>
            </symbol>
        </svg>
        <svg class="svg" aria-hidden="true" v-if="setText=='...'">
            <use xlink:href="#icon-more"></use>
        </svg>
        {{setText=='...' ?'':setText}}


    </span>


</template>

<script lang="ts">
    import {Component, Prop, Vue, Watch, Emit} from "vue-property-decorator";

    @Component({components: {}})
    //数字角标
    export default class Badge extends Vue {
        //颜色类型，可选值：default:灰色、primary：蓝色、success：绿色、warning：黄色、danger：红色、royal：紫色
        @Prop({default: "default", type: String})
        public type!: string;
        //是否无需背景颜色，为 true 时，背景颜色将变为文字的字体颜色
        @Prop({default: false, type: Boolean})
        public inverted!: boolean;
        //角标内容
        @Prop({default: "", type: String})
        public text!: string;
        //Badge 大小，可取值：normal、small
        @Prop({default: "normal", type: String})
        public size!: string;
        //最大显示数,可以是数字也可以是false，若为false，则显示原始数据
        @Prop({default: 99})
        public max!: number | boolean;
        //超出补全后缀,false为不添加后缀，'...'为全部替换成省略号，其他则作为后缀（超出一个字符仅取第一个字符）
        @Prop({default: "+"})
        public suffix!: string | boolean;


        private get setClass(): string {
            let classList = ["badge-" + this.type, "badge-size-" + this.size];
            if (this.inverted === true) {
                classList.push("badge-inverted");
            }
            return classList.join(" ");
        }

        private get setText(): string {

            if (Number(this.text) > (Number(this.max)) && this.max) {
                if (this.suffix === "...") {
                    return "...";
                } else if (!this.suffix) {
                    return String(this.max);
                } else {
                    return String(this.max) + this.suffix;
                }
            } else {
                return this.text;
            }
        }

        private mounted(): void {
            if (typeof (this.suffix) !== "boolean" && String(this.suffix) !== "...") {
                this.suffix = this.suffix.substr(0, 1);
            }
        }

        //点击 Badge 触发事件
        @Emit("click")
        private onClick() {
        }
    }
</script>

<style scoped lang="stylus">
    .badge,
    .badge-default
        position absolute
        box-sizing border-box;
        font-size 12px;
        line-height 1;
        display inline-block;
        padding 3px 6px;
        color #333;
        border-radius 100px;


    .badge.badge-size-small,
    .badge-default.badge-size-small
        height 10px;
        line-height 11px;
        padding 0px 3px;
        font-size 8px !important;


    .badge.badge-inverted
        padding 0 5px 0 0;
        color #929292;
        background-color transparent


    .badge-primary
        color #fff;
        background-color #007aff


    .badge-blue.badge-inverted,
    .badge-primary.badge-inverted
        color #007aff;
        background-color transparent


    .badge-green,
    .badge-success
        color #fff;
        background-color #4cd964;


    .badge-green.badge-inverted,
    .badge-success.badge-inverted
        color #4cd964;
        background-color transparent


    .badge-warning,
    .badge-yellow
        color #fff;
        background-color #f0ad4e


    .badge-warning.badge-inverted,
    .badge-yellow.badge-inverted
        color #f0ad4e;
        background-color transparent


    .badge-danger,
    .badge-red
        color #fff;
        background-color #dd524d


    .badge-danger.badge-inverted,
    .badge-red.badge-inverted
        color #dd524d;
        background-color transparent


    .badge-purple,
    .badge-royal
        color #fff;
        background-color #8a6de9


    .badge-purple.badge-inverted,
    .badge-royal.badge-inverted
        color #8a6de9;
        background-color transparent

    .svg
        width 16px;
        height 16px;
        vertical-align -2.5px;
        fill currentColor;
        overflow hidden;

    em

        font-style normal;

</style>